import React, { useState ,useContext} from 'react'
// import React from 'react';
import { css } from 'emotion';
import useMindmap from '../../../customHooks/useMindmap';
import {findNode} from '../../../methods/assistFunctions';
import {context} from '../../../context';


const MultiCheckBox = ({ node, exercises }) => {

    const mindmapHook=useMindmap();

    const handleClick = (event) => {
        let index = event.target.getAttribute('data-index');
        let choosed=node.data.exercises[index];
        if (choosed!==true) {
            mindmapHook.addExercise(node.id,index);
        } else {
            mindmapHook.deleteExercise(node.id,index);
        }
        console.log(node.data)
    }

    return (<div className={wrapper}>
        {exercises.map((exercise, index) => {
            let choosed=node.data.exercises[index];
            return (<span key={index}><input key={index} type='checkbox' onChange={handleClick} data-index={index} value={exercise} checked={choosed===true}></input>
                <span className={spancss}>{exercise}</span>
            </span>)
        })}
    </div>);
}

export default MultiCheckBox;

// CSS
const wrapper = css`
display: flex;
position: absolute;
bottom: calc(100% + 5px);
left:0;
background-color: #ffffff;
width: max-content;
height: 50px;
padding: 0 8px;
font-size: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 5px 5px 10px #aaaaaa;
`;

const spancss= css`
color: #000000;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal
`;